<template>
  <el-card style="background: white; margin: 20px">
    <div>
      <div id="app-menu">
        <!-- 预览窗 -->
        <div class="weixin-preview">
          <div class="weixin-bd">
            <div class="weixin-header">公众号菜单</div>
            <ul class="weixin-menu" id="weixin-menu">
              <li
                v-for="(btn, i) in menu.buttons"
                :key="i"
                class="menu-item"
                :class="{ current: selectedMenuIndex === i && selectedMenuLevel == 1 }"
                @click="selectMenu(i)"
              >
                <div class="menu-item-title">
                  <span>{{ btn.name }}</span>
                </div>
                <ul class="weixin-sub-menu">
                  <li
                    v-for="(sub, i2) in btn.sub_button"
                    :key="i2"
                    class="menu-sub-item"
                    :class="{
                      current: selectedMenuIndex === i && selectedSubMenuIndex === i2 && selectedMenuLevel == 2,
                      'on-drag-over': onDragOverMenu == i + '_' + i2
                    }"
                    @click.stop="selectSubMenu(i, i2)"
                    draggable="true"
                    @dragstart="selectSubMenu(i, i2)"
                    @dragover.prevent="onDragOverMenu = i + '_' + i2"
                    @drop="onDrop(i, i2)"
                  >
                    <div class="menu-item-title">
                      <span>{{ sub.name }}</span>
                    </div>
                  </li>
                  <li
                    v-if="btn.sub_button.length < 5"
                    class="menu-sub-item"
                    :class="{ 'on-drag-over': onDragOverMenu == i + '_' + btn.sub_button.length }"
                    @click.stop="addMenu(2, i)"
                    @dragover.prevent="onDragOverMenu = i + '_' + btn.sub_button.length"
                    @drop="onDrop(i, btn.sub_button.length)"
                  >
                    <div class="menu-item-title">
                      <el-button icon="plus" type="text"></el-button>
                    </div>
                  </li>
                  <i class="menu-arrow arrow_out"></i>
                  <i class="menu-arrow arrow_in"></i>
                </ul>
              </li>
              <li class="menu-item" v-if="menu.buttons.length < 3" @click="addMenu(1)">
                <el-button icon="plus" type="text"></el-button>
              </li>
            </ul>
          </div>
        </div>
        <!-- 菜单编辑器 -->
        <div class="weixin-menu-detail" v-if="selectedMenuLevel > 0">
          <wx-menu-button-editor
            :button="selectedButton"
            :selected-menu-level="selectedMenuLevel"
            @del-menu="delMenu"
          ></wx-menu-button-editor>
        </div>
      </div>
      <div class="weixin-btn-group">
        <el-button type="success" icon="upload" v-auth="['colewechat:admin:menu:edit']" @click="updateWxMenu">
          保存菜单配置
        </el-button>
        <el-button type="warning" icon="delete" v-auth="['colewechat:admin:menu:edit']" @click="clearAll">
          清空全部
        </el-button>
        <el-button type="warning" icon="upload" v-auth="['colewechat:admin:menu:sync']" @click="syncWxMenu">
          同步微信菜单
        </el-button>
      </div>
    </div>
  </el-card>
</template>
<script>
import wxMenuButtonEditor from "./wx-menu-button-editor.vue";
import { getConfig, setConfig } from "@/api/system/config/index.ts";
import { koiMsgSuccess, koiMsgBox } from "@/utils/koi.ts";
import { syncWxMenu } from "@/plugin/colewechat/api/menu/index.ts";

const key = "COLE_WECHAT_MENU_CONFIG";
export default {
  components: {
    wxMenuButtonEditor
  },
  data() {
    return {
      menu: {
        buttons: []
      }, //当前菜单
      selectedMenuIndex: "", //当前选中菜单索引
      selectedSubMenuIndex: "", //当前选中子菜单索引
      selectedMenuLevel: 0, //选中菜单级别
      selectedButton: "", //选中的菜单按钮
      onDragOverMenu: "" //当前鼠标拖动到的位置
    };
  },
  mounted() {
    this.getWxMenu();
  },
  methods: {
    getWxMenu() {
      this.menu = {
        buttons: []
      };
      getConfig({ key: key }).then(res => {
        if (Object.keys(res.data).length > 0) {
          this.menu = res.data;
        } else {
          this.menu = {
            buttons: []
          };
        }
      });
      // this.$http({
      //   url: this.$http.adornUrl("/manage/wxMenu/getMenu")
      // }).then(({ data }) => {
      //   if (data.code == 200) {
      //     this.menu = data.data.menu;
      //   } else {
      //     this.$message({
      //       type: "error",
      //       message: data.msg
      //     });
      //   }
      // });
    },
    //选中主菜单
    selectMenu(i) {
      this.selectedMenuLevel = 1;
      this.selectedSubMenuIndex = "";
      this.selectedMenuIndex = i;
      this.selectedButton = this.menu.buttons[i];
    },
    //选中子菜单
    selectSubMenu(i, i2) {
      this.selectedMenuLevel = 2;
      this.selectedMenuIndex = i;
      this.selectedSubMenuIndex = i2;
      this.selectedButton = this.menu.buttons[i].sub_button[i2];
    },
    //添加菜单
    addMenu(level, i) {
      if (level == 1 && this.menu.buttons.length < 3) {
        this.menu.buttons.push({
          type: "view",
          name: "菜单名称",
          sub_button: [],
          url: ""
        });
        this.selectMenu(this.menu.buttons.length - 1);
      }
      if (level == 2 && this.menu.buttons[i].sub_button.length < 5) {
        this.menu.buttons[i].sub_button.push({
          type: "view",
          name: "子菜单名称",
          url: ""
        });
        this.selectSubMenu(i, this.menu.buttons[i].sub_button.length - 1);
      }
    },
    //删除菜单
    delMenu() {
      if (this.selectedMenuLevel == 1 && confirm("删除后菜单下设置的内容将被删除")) {
        this.menu.buttons.splice(this.selectedMenuIndex, 1);
        this.unSelectMenu();
      } else if (this.selectedMenuLevel == 2) {
        this.menu.buttons[this.selectedMenuIndex].sub_button.splice(this.selectedSubMenuIndex, 1);
        this.unSelectMenu();
      }
    },
    clearAll() {
      // eslint-disable-next-line @typescript-eslint/no-this-alias
      let that = this;
      koiMsgBox("确认清空所有菜单吗?本次操作将无法找回,但是并不会修改微信公众号菜单")
        .then(() => {
          that.menu = {
            buttons: []
          };
          setConfig({ key: key, value: this.menu }).then(() => {
            koiMsgSuccess("操作成功");
          });
          that.unSelectMenu();
        })
        .catch();

    },
    syncWxMenu() {
      koiMsgBox("确认同步微信公众号菜单吗?本次操作将会真正的修改微信公众号菜单")
        .then(() => {
          syncWxMenu().then(() => {
            koiMsgSuccess("操作成功");
          });
        })
        .catch();
    },
    unSelectMenu() {
      //不选中任何菜单
      this.selectedMenuLevel = 0;
      this.selectedMenuIndex = "";
      this.selectedSubMenuIndex = "";
      this.selectedButton = "";
    },
    updateWxMenu() {
      setConfig({ key: key, value: this.menu }).then(() => {
        koiMsgSuccess("操作成功");
      });
    },
    onDrop(i, i2) {
      //拖拽移动位置
      this.onDragOverMenu = "";
      if (i == this.selectedMenuIndex && i2 == this.selectedSubMenuIndex)
        //拖拽到了原位置
        return;
      if (i != this.selectedMenuIndex && this.menu.buttons[i].sub_button.length >= 5) {
        this.$message.error("目标组已满");
        return;
      }
      this.menu.buttons[i].sub_button.splice(i2, 0, this.selectedButton);
      let delSubIndex = this.selectedSubMenuIndex;
      if (i == this.selectedMenuIndex && i2 < this.selectedSubMenuIndex) delSubIndex++;
      this.menu.buttons[this.selectedMenuIndex].sub_button.splice(delSubIndex, 1);
      this.unSelectMenu();
    }
  }
};
</script>
<style src="./src/plugin/colewechat/assets/css/wx-menu.css"></style>
